import React, { Component } from 'react';
import { Card, Row, Col, Input, List, Tabs, Icon, Tooltip, Empty, Statistic, Button } from 'antd';
import { handlerApprovalStatusColor } from '@/utils/publicFunction';
import router from 'umi/router';
import Mpagination from './Mpagination';

const company = 100000000;
const { Search } = Input;
const { TabPane } = Tabs;
class ContentIndex extends Component {
  state = {
    loading: false,
    current: 1,
    pageSize: 6,
    projectName: '',
  };

  requestProjectStagePageList = params => {
    const { dispatch } = this.props;
    const self = this;
    self.setState({
      loading: true,
    });
    dispatch({
      type: 'Workbench/requestProjectStagePageList',
      payload: {
        params,
      },
      callback: () => {
        self.setState({
          loading: false,
        });
      },
    });
  };

  handleIptVal = val => {
    const { pageSize } = this.state;
    const params = {
      current: '1',
      pageSize,
      projectName: val,
    };
    this.setState({
      current: 1,
      projectName: val,
    });
    this.requestProjectStagePageList(params);
  };

  handlePaginationChange = (current, pageSize) => {
    const { projectName } = this.state;
    const params = {
      current,
      pageSize,
      projectName,
    };
    this.requestProjectStagePageList(params);
    this.setState({
      current,
      pageSize,
    });
  };

  // 点击项目名 跳转详情页面
  onProjectNameClick = item => {
    router.push({
      pathname: '/Workbench/projectWorkbench',
      query: {
        projectName: escape(item.projectName),
        projectId: item.projectId,
      },
    });
  };

  render() {
    const { current, pageSize, loading } = this.state;
    const { porjectStagePageList, l } = this.props;
    return (
      <div className="content-index">
        <Card style={{ marginBottom: '10px' }}>
          <Row type="flex" align="middle" justify="space-between">
            <Col className="text-font">项目概览</Col>
            <Col>
              <Search
                placeholder="请输入项目名称或项目编码"
                onSearch={this.handleIptVal}
                style={{ width: 200 }}
                size="small"
              />
            </Col>
          </Row>
        </Card>
        <div className="list-box">
          <List
            grid={{
              gutter: 10,
              xs: 1,
              sm: 2,
              md: 2,
              lg: 2,
              xl: 3,
              xxl: 3,
            }}
            dataSource={porjectStagePageList.list}
            loading={l || loading}
            renderItem={item => (
              <List.Item>
                <Card className="ant-card-box">
                  {/* 标题头部带穿透 */}
                  <Row type="flex" align="middle" justify="space-between" gutter={[0, 10]}>
                    <Col className="title">{item.projectName}</Col>
                    <Col className="xh-click-states" onClick={() => this.onProjectNameClick(item)}>
                      <Tooltip
                        placement="topLeft"
                        title={`点击我(●'◡'●)查看《${item.projectName}》详情概览`}
                      >
                        <i className="dots" style={{ background: 'rgba(39,97,255,1)' }} />
                        <i className="dots" style={{ background: 'rgba(39,97,255,1)' }} />
                        <i className="dots" style={{ background: 'rgba(39,97,255,1)' }} />
                      </Tooltip>
                    </Col>
                  </Row>
                  {/* 类型 */}
                  <Row className="sub-type" type="flex" align="middle" justify="space-between">
                    <Col>
                      <Statistic
                        prefix="总货值："
                        value={
                          item.projectTotalValue ? (item.projectTotalValue / company).toFixed(2) : 0
                        }
                        suffix="亿元"
                      />
                    </Col>
                    <Col>
                      <Statistic
                        prefix="权益货值："
                        value={
                          item.projectEquityValue
                            ? (item.projectEquityValue / company).toFixed(2)
                            : 0
                        }
                        suffix="亿元"
                      />
                    </Col>
                    <Col>
                      <Statistic
                        prefix="权益比例："
                        suffix="%"
                        value={
                          item.projectEquityRate ? (item.projectEquityRate * 100).toFixed(2) : 0
                        }
                      />
                    </Col>
                  </Row>
                  <Tabs defaultActiveKey="1">
                    {item.projectStageList.map(stage => (
                      <TabPane tab={stage.stageName} key={stage.stageId} size="small">
                        {stage.versionList.length <= 0 ? (
                          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                        ) : (
                          <Row gutter={[0, 15]}>
                            {stage.versionList.map(val => (
                              <Col key={val.bussnessType}>
                                <Row type="flex" align="middle" justify="space-between">
                                  <Col span={14}>
                                    <div className="ellipsis">
                                      {val.bussnessType} :&nbsp;
                                      <Tooltip
                                        placement="topLeft"
                                        title={`${val.bussnessType}:${val.versionName}`}
                                      >
                                        {val.versionName}
                                      </Tooltip>
                                    </div>
                                  </Col>
                                  <Col span={5}>
                                    <div className="ellipsis">
                                      <i
                                        className="dots"
                                        style={{
                                          background: handlerApprovalStatusColor(val.versionStatus),
                                        }}
                                      />
                                      <Tooltip placement="topLeft" title={val.versionStatus}>
                                        {val.versionStatus}
                                      </Tooltip>
                                    </div>
                                  </Col>
                                  <Col span={4}>
                                    <div className="ellipsis" style={{ textAlign: 'right' }}>
                                      <Tooltip
                                        placement="topLeft"
                                        title={`${(val.price / company).toFixed(2)}亿元`}
                                      >
                                        {(val.price / company).toFixed(2)}
                                        <span>亿元</span>
                                      </Tooltip>
                                    </div>
                                  </Col>
                                  <Col span={1}>
                                    {val.isTodo ? (
                                      <div className="ellipsis" style={{ textAlign: 'right' }}>
                                        <Tooltip
                                          placement="topLeft"
                                          title={`点击跳转到${item.projectName}${val.bussnessType}${val.versionName}`}
                                        >
                                          <Icon
                                            type="bell"
                                            theme="filled"
                                            style={{ color: '#FAAD15' }}
                                            onClick={() => {
                                              window.open(val.url);
                                            }}
                                          />
                                        </Tooltip>
                                      </div>
                                    ) : null}
                                  </Col>
                                </Row>
                              </Col>
                            ))}
                          </Row>
                        )}
                      </TabPane>
                    ))}
                  </Tabs>
                </Card>
              </List.Item>
            )}
          />
          <Mpagination
            total={porjectStagePageList.total || 0}
            pageSize={pageSize}
            current={current}
            pages={
              porjectStagePageList.total ? Math.ceil(porjectStagePageList.total / pageSize) : 0
            }
            onShowSizeChange={(c, p) => this.handlePaginationChange(c, p)}
            handlePaginationChange={this.handlePaginationChange}
          />
        </div>
      </div>
    );
  }
}

export default ContentIndex;
